<template>
  <div>
    <div class="remen">
      热门城市
      <ul>
        <li>上海</li>
        <li>北京</li>
        <li>广州</li>
        <li>深圳</li>
        <li>武汉</li>
        <li>天津</li>
        <li>西安</li>
        <li>南京</li>
        <li>杭州</li>
        <li>成都</li>
        <li>重庆</li>
      </ul>
    </div>
    <div>
      <van-index-bar>
        <template v-for="(item, index) in city">
          <van-index-anchor :key="index" :index="item.initial"/>
          <van-cell
              v-for="(i, ikey) in item.list"
              :key="index + '-' + ikey"
              :title="i.name"
          />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "City",
  data() {
    return {
      city: [],
    };
  },
  mounted() {
    axios.get("city.json").then((res) => {
      console.log(res);
      this.city = res.data.city;
    })
  }
}
</script>

<style scoped>
div {
  text-align: left;
}
.remen ul{
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  background: rgb(245,245,245);
  padding-bottom: 0.267rem;
}
.remen li{
  width: 2.667rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.4rem;
  margin: 0.267rem 0 0 0;
  background: white;
  text-align: center;
}
</style>